<template>
  <div id="component_rcgl">
    <ul>
      <li class="component_rcgl_item">
        <div class="component_rcgl_item_title">
          <div style="display: flex;flex: 1;justify-content: center;align-items: center;margin-left: 20px;">
            <el-button type="text" @click="rcgl_getData(-1)" icon="el-icon-arrow-left"></el-button>
            <span>{{rcglList[rcglSowDate].date}}</span>
            <el-button type="text" @click="rcgl_getData(1)" icon="el-icon-arrow-right"></el-button>
          </div>
          <el-button class="component_rcgl_item_add" type="text" icon="el-icon-circle-plus-outline"></el-button>
        </div>
        <div class="component_rcgl_item_content">
          <div class="component_rcgl_item_content_box">
            <div v-for="(schedule,res_sd_index) in rcglList[rcglSowDate].scheduleList" :key="res_sd_index">
              <p>
                <span>{{schedule.start_time}} - {{schedule.end_time}}</span>
                <span>{{schedule.schedule_title}}</span>
              </p>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  data() {
    return {
      rcglList:[
        {
          date:"2020-02-21",
          scheduleList:[
            {start_time:"08:00",end_time:"09:30",
              schedule_title:"早会",schedule_content:"早会",state:""},
            {start_time:"14:42",end_time:"15:60",
              schedule_title:"需求讨论会",schedule_content:"需求讨论会",state:""},
            {start_time:"18:00",end_time:"20:00",
              schedule_title:"电话会议",schedule_content:"电话会议",state:""},
          ]
        },
        {
          date:"2020-02-22",
          scheduleList:[
            {start_time:"08:00",end_time:"09:30",
              schedule_title:"早会",schedule_content:"早会",state:""},
            {start_time:"12:00",end_time:"13:30",
              schedule_title:"与客户就餐",schedule_content:"与客户就餐",state:""},
            {start_time:"15:00",end_time:"16:30",
              schedule_title:"需求讨论会(新需求确定)，已完成需求确定",schedule_content:"需求讨论会(新需求确定)，已完成需求确定",state:""},
            {start_time:"15:00",end_time:"17:30",
              schedule_title:"电话会议",schedule_content:"电话会议",state:""},
            {start_time:"20:00",end_time:"21:30",
              schedule_title:"内部讨论",schedule_content:"内部讨论",state:""},
            {start_time:"20:00",end_time:"21:30",
            schedule_title:"内部讨论",schedule_content:"内部讨论",state:""},
            {start_time:"20:00",end_time:"21:30",
            schedule_title:"内部讨论",schedule_content:"内部讨论",state:""},
          ]
        }
      ],
      rcglSowDate:0,
    }
  },
  methods: {
     //切换日程安排
    rcgl_getData(ne){
      if(ne > 0 && this.rcglSowDate < this.rcglList.length-1 || ne < 0 && this.rcglSowDate > 0){
        this.rcglSowDate+=ne
      }else{
        
      };
    },
  },
  created() {
    this.rcglSowDate = this.rcglList.length-1;
  }
}
</script>
<style lang="scss" scoped>
#component_rcgl{
  height: 320px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  ul{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .component_rcgl_item{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    .component_rcgl_item_title{
      display: flex;
      width: 100%;
      align-items: center;
      height: 40px;
      justify-content: center;
      position: relative;
      span{
        margin: 0 20px;
        color: #666666;
      }
      .component_rcgl_item_add{
        font-size: 20px;
        margin-right: 20px;
        // position: absolute;
        // right: 20px;
      }
    }
    .component_rcgl_item_content{
      display: flex;
      width: 100%;
      position: relative;
      flex: 1;
      overflow: hidden;
      padding-left:20px;
      &:hover{
        overflow: auto;
      }
      .component_rcgl_item_content_box{
        display: block;
        width: inherit;
        position: relative;
        flex: none;
        flex-direction: column;
        padding-right: 20px;
        // margin-right: 10px;
        &> div{
        display: flex;
        align-items: center;
        padding-left:30px;
        // margin-right: 20px;
        position: relative;
        &:hover{
          background-color: #f3faff;
        }
        &::before{
          content:"";
          width:10px;
          height: 10px;
          border-radius: 50%;
          background-color: #46b3e8;
          border: 3px #bee4f7 solid;
          position: absolute;
          top: 9px;
          left:23px;
          z-index: 99;
          box-sizing: content-box;
        }
        p{
          display: flex;
          justify-content: center;
          padding:8px 20px 8px 30px;
          border-left: 1px #dddddd solid;
          position: relative;
          flex-direction: column;
          span{
            display: inline-block;
            line-height: 20px;
          }
          span:nth-child(1){color: #333333;}
          span:nth-child(2){color: #999999;}
        }
      }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
</style>